<template>
  <div class="container">
    <el-card class="categories-card">
      <!-- 栅格布局 -->
      <el-row>
        <el-col :span="12">
          <el-button type="primary" size="small" @click="addCategories">添加分类</el-button>
        </el-col>
        <el-col :span="12">
          <el-input placeholder="请输入关键字" v-model="input" @input="handlerChange" >
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="序号" width="70px">
          <template v-slot="{ $index }">
            {{ pageSize * (page - 1) + $index + 1 }}
          </template>
        </el-table-column>

        <el-table-column prop="image" label="图片" width="220px">
          <!-- <template slot-scope="{row}"> -->
          <!-- <template #default="{row}"> -->
          <template v-slot="{row}">
            <img class="photo" :src="row.image" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="180">
        </el-table-column>
        <el-table-column prop="desc" label="介绍">
        </el-table-column>
        <el-table-column prop="handle" label="操作" width="180">
          <template slot-scope="{row}">
            <el-button size="mini" type="primary" @click="editCategories(row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="delCategorie(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-pagination layout="prev, pager, next" 
        :total="total" 
        :page-size="pageSize" 
        @current-change="currentChange"
        v-if="bPageShow">
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 弹窗组件 -->
    <Dialog ref="dialog" :dialogFormVisible.sync="showDialog" @updateEvent="getList"></Dialog>
  </div>
</template>

<script>
import Dialog from './components/categories-dialog.vue'
import { getCategoriesList, delCategorie, getCategoriesCount } from '@/api/categories'
export default {
  components: {
    Dialog
  },
  data() {
    return {
      input: '',
      tableData: [],
      showDialog: false,// 控制弹窗的显示隐藏
      total: 0,
      pageSize: 2,
      page: 1,// 序号
      bPageShow: true,//分页重新加载可以解决搜索后当前页不变的bug

    }
  },
  methods: {
    // 输入为空时自动获取列表数据
    handlerChange(e){
      if(e==='') this.getList()
    },
    // 搜索
    async search() {
      const res = await getCategoriesCount(this.input)
      this.getList(this.input, res.data)
      this.bPageShow=false//分页重新加载可以解决搜索后当前页不变的bug
      this.$nextTick(()=>{
        this.bPageShow = true;
      });
    },
    // 删除分类
    async delCategorie(id) {
      await delCategorie(id)
      // 更新列表，当删除最后一条数据的时候，需要请求上一页的数据
      if (this.tableData.length === 1 && this.page !== 1) {
          this.page--

        }
      // 刷新列表
      this.getLists(this.page,this.pageSize)
    },
    // 编辑分类显示弹窗
    editCategories(row) {
      this.showDialog = true
      this.$refs.dialog.getCategorie(row.id)
    },
    // 添加分类显示弹窗
    addCategories() {
      this.showDialog = true
    },
    // 获取数据列表数量及第一页数据
    async getList(key, num) {
      let res
      if (key) {
        res = await getCategoriesList(num, 0, key)
      } else {
        // 假定总数不超过500
        res = await getCategoriesList(500)
      }
      this.total = res.data.length ? res.data.length : 500
      // 保存每页需要的数据量
      this.tableData = res.data.filter((item, pageSize) => pageSize <= 1)
    },
    // 获取数据列表
    async getLists(page, pageSize) {
      const index = (page - 1) * pageSize
      let res
      if (this.input) {
        res = await getCategoriesList(pageSize, index, this.input)
      } else {
        res = await getCategoriesList(pageSize, index)
      }
      this.tableData = res.data
    },
    // 页码发生改变时触发
    currentChange(page) {
      this.page = page
      this.getLists(page, this.pageSize)
    }

  },


  async created() {
    // 调用分类信息接口
    this.getList()
  },
}
</script>

<style>
.categories-card {
  margin: 20px;
}

.photo {
  width: 200px;
  height: 200px;
  object-fit: cover;
}
</style>
